<template>
  <up-tabbar
    placeholder
    :border="false"
    @change="handleChange"
    fixed
    safeAreaInsetBottom
  >
    <up-tabbar-item
      v-for="(item, index) in store.state.user.tabbar"
      :key="index"
      :text="item.text"
      :icon="
        currentPage == item.pagePath ? item.selectedIconPath : item.iconPath
      "
      :badge="item.badge"
    ></up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { useStore } from "vuex";

const store = useStore();

const props = defineProps({
  currentPage: {
    type: String,
    default: "",
  },
});

function handleChange(index) {
  const currentTab = store.state.user.tabbar[index];
  if (currentTab.pagePath) {
    uni.redirectTo({
      url: currentTab.pagePath,
    });
  }
}
</script>

<style lang="scss" scoped></style>
